@boxBg1: rgba(0, 0, 0, 0.2);
@boxTextColor: rgba(255, 255, 255, 0.8);
@boxRadius: 4px;
@mainColor: rgba(6, 183, 243, 1);

.text-main {
  color: @mainColor;
}

.text-white {
  color: #fff;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // background: linear-gradient(45deg, #6c1cfe, #07e3f1);
  // background-image: linear-gradient(135deg, #92ffc0 10%, #002661 100%);
  background: #4286f4; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to top,
    #4286f4,
    #0082c8,
    #0082c8,
    #4286f4
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to top,
    #4286f4,
    #0082c8,
    #0082c8,
    #4286f4
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  // background-color: rgba(10, 45, 101, 0.8);
  // background-color: #000;
  // overflow-y: hidden;
  // color: #fff;
  z-index: 1;

  .page-title {
    font-size: 24px;
    padding: 10px;
    color: #fff;
    letter-spacing: 2px;
  }

  .canvas-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .unupload-tip {
      font-size: 16px;
      padding: 40px;
      text-align: center;
    }
  }

  .chart-info {
    position: fixed;
    left: 20px;
    top: 20px;
    max-height: calc(~"100% - 40px");
    overflow: auto;
    width: 340px;
    z-index: 100;

    .chart-module {
      .module-title {
        padding: 10px;
        font-size: 20px;
        color: @mainColor;
        display: flex;
        align-items: center;
        height: 50px;
        border-bottom: 1px solid #fff;
        position: relative;

        .title {
          color: #fff;
          font-size: 16px;
          margin-left: 10px;
        }

        &::after {
          content: "";
          position: absolute;
          height: 4px;
          width: 20px;
          right: 10px;
          bottom: -2px;
          border-radius: 4px;
          background-color: @boxTextColor;
          box-shadow: 0px 0px 2px 0px #fff;
        }

        &::before {
          content: "";
          position: absolute;
          height: 4px;
          width: 20px;
          left: 10px;
          bottom: -2px;
          border-radius: 4px;
          background-color: @boxTextColor;
          box-shadow: 0px 0px 2px 0px #fff;
        }
      }

      .module-content {
        padding: 10px;

        .module-list-item {
          padding: 2px 0;
        }
      }
    }
  }

  .box1 {
    background-color: @boxBg1;
    color: @boxTextColor;
    border-radius: @boxRadius;
  }

  .box2 {
    color: @boxTextColor;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: @boxRadius;
    box-shadow: 0 0 3rem rgba(100, 200, 255, 0.5) inset;
    box-sizing: border-box;
    border: 1px solid @mainColor;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 40px;
      height: 40px;
      transition: all 1s;
      border-radius: @boxRadius;
    }

    &::before {
      top: -4px;
      left: -4px;
      border-top: 2px solid @mainColor;
      border-left: 2px solid @mainColor;
    }

    &::after {
      right: -4px;
      bottom: -4px;
      border-bottom: 2px solid @mainColor;
      border-right: 2px solid @mainColor;
    }

    &:hover::before,
    &:hover::after {
      width: calc(100% + 9px);
      height: calc(100% + 9px);
      pointer-events: none;
    }

    .box2-header {
      height: 40px;
      padding: 0 10px;
      .close {
        text-align: right;
        font-size: 24px;
        color: @mainColor;
        cursor: pointer;
      }
    }
  }
}
.custom-scrollbar {
  /* 美化滚动条 */
  &::-webkit-scrollbar {
    width: 3px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  &::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    background-color: rgba(6, 183, 243, 1);
  }
}
